<script setup>
// No reactive state needed for this component
</script>

<template>
  <div class="container mx-auto p-8">
    <h1 class="mb-6 text-2xl font-bold">Label Component</h1>

    <div class="grid grid-cols-1 gap-6 md:grid-cols-2">
      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Basic Label</h3>
        <div class="flex flex-col space-y-4">
          <div>
            <Label for="username">Username</Label>
            <TextInput id="username" class="mt-1" />
          </div>

          <div>
            <Label for="password" required>Password</Label>
            <TextInput type="password" id="password" required class="mt-1" />
          </div>

          <div>
            <Label for="disabled-input" disabled>Disabled Label</Label>
            <TextInput id="disabled-input" disabled class="mt-1" />
          </div>
        </div>
      </div>

      <div class="rounded-md border p-4">
        <h3 class="mb-2 font-medium">Label Variations</h3>
        <div class="flex flex-col space-y-6">
          <div>
            <h4 class="mb-2 text-sm font-medium">Size Variations</h4>
            <div class="space-y-4">
              <div>
                <Label size="small" for="small-input">Small Label</Label>
                <TextInput id="small-input" size="small" class="mt-1" />
              </div>
              <div>
                <Label size="medium" for="medium-input">Medium Label</Label>
                <TextInput id="medium-input" size="medium" class="mt-1" />
              </div>
              <div>
                <Label size="large" for="large-input">Large Label</Label>
                <TextInput id="large-input" size="large" class="mt-1" />
              </div>
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">Label with Help Text</h4>
            <div>
              <div class="flex items-center">
                <Label for="email-with-help" required>Email Address</Label>
                <Tooltip content="Enter a valid email address" position="end">
                  <span class="ml-1 text-gray-500">ℹ️</span>
                </Tooltip>
              </div>
              <TextInput
                type="email"
                id="email-with-help"
                placeholder="example@domain.com"
                class="mt-1"
              />
              <span class="mt-1 block text-xs text-gray-500">
                We'll never share your email with anyone else.
              </span>
            </div>
          </div>

          <div>
            <h4 class="mb-2 text-sm font-medium">
              Using Label with Other Form Elements
            </h4>
            <div class="space-y-4">
              <div>
                <Label for="dropdown-example">Select Country</Label>
                <Dropdown
                  id="dropdown-example"
                  placeholder="Select a country"
                  class="mt-1 w-full"
                >
                  <ListBox>
                    <Option value="us">United States</Option>
                    <Option value="ca">Canada</Option>
                    <Option value="uk">United Kingdom</Option>
                  </ListBox>
                </Dropdown>
              </div>

              <div>
                <Label>Preferred Contact Method</Label>
                <div class="mt-1 space-y-2">
                  <div class="flex items-center gap-2">
                    <Radio name="contact" value="email" />
                    <span>Email</span>
                  </div>
                  <div class="flex items-center gap-2">
                    <Radio name="contact" value="phone" />
                    <span>Phone</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
